<template>
  <el-container class="transaction-container">
    <el-header>交易操作</el-header>
    <el-main>
      <el-form :model="form" label-width="120px">
        <el-form-item label="卡号">
          <el-input
              v-model="form.cardNumber"
              placeholder="请输入卡号"
          ></el-input>
        </el-form-item>
        <el-form-item label="操作类型">
          <el-select v-model="form.operationType" placeholder="请选择操作类型">
            <el-option label="存款" value="deposit"></el-option>
            <el-option label="取款" value="withdraw"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="金额">
          <el-input-number
              v-model="form.amount"
              :min="0.01"
              :precision="2"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
              v-model="form.descrip"
              type="textarea"
              placeholder="请输入描述"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleTransaction"
          >确认交易</el-button
          >
        </el-form-item>
      </el-form>
      <el-card v-if="accountInfo" class="account-info-card">
        <template #header>账户信息</template>
        <p>卡号：{{ accountInfo.cardNumber }}</p>
        <p>当前余额：{{ accountInfo.balance }} 元</p>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import { ref } from "vue";
import axios from "axios";

// 假设这里有模拟的账户数据，实际项目中可通过接口获取
const mockAccountData = {
  1234567890: {
    cardNumber: "1234567890",
    balance: 1000.0,
  },
};

export default {
  name: "TransactionView",
  setup() {
    const form = ref({
      cardNumber: "",
      operationType: "deposit", // 默认存款
      amount: 0,
      descrip: "", // 新增描述字段
    });
    const accountInfo = ref(null);

    // 处理交易操作
    const handleTransaction = () => {
      // 构建请求体
      const transactionRequest = {
        cardID: form.value.cardNumber,
        savingName: form.value.operationType === "deposit" ? "存款" : "取款",
        amount: form.value.amount,
        descrip: form.value.descrip,
      };

      // 发送请求到后端
      axios
          .post("http://localhost:8088/api/deposits/process", transactionRequest)
          .then(() => {
            alert("交易成功");
            // 更新账户信息
            const account = mockAccountData[form.value.cardNumber];
            if (account) {
              if (form.value.operationType === "deposit") {
                account.balance += form.value.amount;
              } else if (form.value.operationType === "withdraw") {
                if (account.balance >= form.value.amount) {
                  account.balance -= form.value.amount;
                } else {
                  alert("余额不足");
                  return;
                }
              }
              accountInfo.value = { ...account };
            }
            // else {
            //   alert("卡号不存在");
            // }
          })
          .catch((error) => {
            console.error("Error processing transaction:", error);
            alert("交易失败，请稍后再试");
          });
    };

    return {
      form,
      accountInfo,
      handleTransaction,
    };
  },
};
</script>

<style scoped>
.transaction-container {
  height: 100%;
}
.account-info-card {
  margin-top: 20px;
}
</style>
